import React, { useState, useEffect } from 'react';
import { useThemeChange } from '@/hooks';
import { TjChart } from '@/pages/ETrade/components';
import { getCssVariableValue } from '@/utils/utils';

const ChartBox = ({ t, realData, doubelYAxisTitle, doubelYAxisSerise, indexMap }) => {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();

  const getChartOption = ([title, data], dataSource) => {
    const chartData = [],
      _yAxis = [
        {
          type: 'value',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
        },
      ];
    dataSource.XAXIS.map((x, i) => {
      const temp = {};
      data.map((t) => {
        const a = t.split('_');
        //屏蔽同名 不同系列名
        if (a[0] && a[1]) {
          temp[t] = dataSource[a[0]][i];
          return;
        }
        temp[t] = dataSource[t][i];
      });
      chartData.push({
        ...temp,
        XAXIS: x,
      });
    });
    if (doubelYAxisTitle.includes(title)) {
      _yAxis.push({
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: getCssVariableValue('--chart-font-color'),
        },
      });
    }
    const _series = data.map((t) => {
      const { props, ...others } = _.cloneDeep(indexMap[t]);
      if (doubelYAxisTitle.includes(title) && doubelYAxisSerise.includes(t)) {
        props.yAxisIndex = 1;
      }
      return {
        dataIndex: t,
        props,
        ...others,
      };
    });

    return {
      grid: { top: 20, left: 48, right: 58, bottom: 50 },
      series: _series,
      dataset: {
        source: chartData,
        dimensions: ['XAXIS', ...data],
      },
      tooltip: {},
      legend: {
        textStyle: {
          color: getCssVariableValue('--chart-legend-color'),
        },
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisTick: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
        },
      ],
      yAxis: _yAxis,
    };
  };
  useEffect(() => {
    if (t) {
      setConfig(getChartOption(t, realData));
    }
  }, [t]);
  useEffect(() => {
    if (t) {
      setTimeout(() => {
        setConfig(getChartOption(t, realData));
      }, 1);
    }
  }, [theme]);
  return <TjChart option={config} />;
};

export default ChartBox;
